<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>超市订单管理系统</title>
<link type="text/css" rel="stylesheet" href="../css/style.css" />
<link type="text/css" rel="stylesheet" href="../css/public.css" />
</head>
<body>
	<!--头部-->
	<header class="publicHeader">
		<h1>超市订单管理系统</h1>
		<div class="publicHeaderR">
			<p>
				<span>下午好！</span><span style="color: #fff21b"> 用戶名</span> , 欢迎你！
			</p>
			<a href="#">退出</a>
		</div>
	</header>
	<!--时间-->
	<section class="publicTime">
		<span id="time">2015年1月1日 11:11 星期一</span> <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
	</section>
	<!--主体内容-->
	<section class="publicMian ">
		<div class="left">
			<h2 class="leftH2">
				<span class="span1"></span>功能列表 <span></span>
			</h2>
			<nav>
				<ul class="list">
					<li><a href="user_list.html">用户管理</a></li>
					<li><a href="#">供应商管理</a></li>
					<li><a href="#">订单管理</a></li>
					<li><a href="#">密码修改</a></li>
					<li><a href="#">退出系统</a></li>
				</ul>
			</nav>
		</div>
		<div class="right">
			<div class="location">
				<strong>你现在所在的位置是:</strong> 
				<span>用户管理页面</span>
			</div>
			<div class="search">
				<form id="search_form" method="get">
					<span>用户名：</span> <input name="userName"/>
					<span>用户角色：</span>
					<select name="userRole">
						<option value="">--请选择--</option>
						<option value="1">系统管理员</option>
						<option value="2">经理</option>
						<option value="3">普通员工</option>
					</select>
					<input value="查 询" type="button" id="searchbutton" onclick="search_userList()">
					<a href="user_add.html">添加用户</a>
				</form>
			</div>

			<table id="user_table" class="providerTable" cellpadding="0" cellspacing="0">
				<tr class="firstTr">
					<th width="5%">序号</th>
					<th width="10%">用户编码</th>
					<th width="7%">用户名</th>
					<th width="10%">性别</th>
					<th width="10%">生日</th>
					<th width="10%">年龄</th>
					<th width="10%">手机号</th>
					<th width="10%">住址</th>
					<th width="10%">用户角色</th>
					<th width="10%">创建时间</th>
					<th width="10%">操作</th>
				</tr>
				<tr>
					<td><span id="index">index</span></td>
					<td><span id="usercode">usercode</span></td>
					<td><span id="username">username</span></td>
					<td><span id="gender">gender</span></td>
					<td><span id="birthday">birthday</span></td>
					<td><span id="age">age</span></td>
					<td><span id="phone">phone</span></td>
					<td><span id="address">address</span></td>
					<td><span id="roleName">roleName</span></td>
					<td><span id="creationdate">creationdate</span></td>
					<td>
						<span>
							<a id="detail" class="viewBill" href="javascript:;">
								<img src="../images/read.png" alt="查看" title="查看" />
							</a>
						</span>
						<span>
							<a id="update" class="modifyBill" href=";" >
								<img src="../images/xiugai.png" alt="修改" title="修改" />
							</a>
						</span>
						<span>
							<a id="delete" class="deleteBill" href="javascript:;">
								<img src="../images/schu.png" alt="删除" title="删除" />
							</a>
						</span>
					</td>
				</tr>
			</table>

			<!--分页-->
			<div class="page-bar">
				<ul class="page-num-ul clearfix">
					<li>
						共<span id="total"></span>条记录&nbsp;&nbsp;
						<span id="pageNow"></span>/<span id="pageTotal"></span>页</li>
					<li><a class="pre" href="javascript:jumpPage(0);">首页</a></li>
					<li><a class="pre" href="javascript:jumpPage(1);">上一页</a></li>
					<li><a class="next" href="javascript:jumpPage(2);">下一页</a></li>
					<li><a class="next" href="javascript:jumpPage(3);">最后一页</a></li>
				</ul>
				<span class="page-go-form">
					<label>跳转至</label>
					<input type="number" name="inputPage" id="inputPage" class="page-key" onkeydown="toJump()"/>页
					<button type="button" class="page-btn" onclick="jump()">GO</button>
				</span>
			</div>
		</div>
	</section>

	<!--点击删除按钮后弹出的页面-->
	<div class="zhezhao"></div>
	<div class="remove" id="removeBi">
		<div class="removerChid">
			<h2>提示</h2>
			<div class="removeMain">
				<p>你确定要删除该订单吗？</p>
				<a href="#" id="yes">确定</a> <a href="#" id="no">取消</a>
			</div>
		</div>
	</div>

	<footer class="footer"> 版权归程龙 </footer>
	<script type="text/javascript" src="../js/time.js"></script>
	<script src="../js/jquery-3.5.1.js"></script>
	<script src="../js/jquery.form.js"></script>
	<script>
		var pageNow = 1;//当前页码
		var pageSize = 5;//每页行数
		var totalPage = 0;//总页码

		loadData_userList();

		//输入页码回车
		function toJump(){
			var code = event.keyCode;
			if(code == 13){//回车的ascii码
				jump();
			}
		}

		//输入页码跳转
		function jump(){
			var num = $("#inputPage").val();
			if(num > 0 && num <= totalPage){
				pageNow = num;
				loadData_userList();
			}
		}

		//点击页面跳转
		function jumpPage(flag){
			if(flag == 0){//首页
				pageNow = 1;
			}else if(flag == 1){//上一页
				pageNow--;
			}else if(flag == 2){//下一页
				pageNow++;
			}else if(flag == 3){//最后一页
				pageNow = totalPage;
			}

			loadData_userList();
		}

		//点击查询
		function search_userList(){
			pageNow = 1;//页码重置为第一页
			loadData_userList();
		}

		//加载用户列表数据
		function loadData_userList(){
			//以ajax方式提交选中的表单
			$("#search_form").ajaxSubmit({
				url: "../user/getUserListByParams",
				dataType: "json",
				data: {"pageNow":pageNow, "pageSize":pageSize},
				success: function(result){
					//渲染数据
					renderDate(result);
				},
				error: function(xhr){
					alert("请求出错："+xhr.status);
				}
			});
		}

		//渲染数据
		function renderDate(result){
			//渲染页码
			renderPage(result.total);

			//渲染数据列表
			renderUserList(result.userList);
		}

		//获取页面的内容作为模版
		var template = $("#user_table tr:eq(1)");
		$("#user_table tr:eq(1)").remove();
		//渲染数据列表
		function renderUserList(userList){
			//清空第一行以下的数据
			$("#user_table tr:gt(0)").remove();

			//遍历数据，渲染页面
			for(var i=0; i<userList.length; i++){
				var tr = template.clone();
				tr.find("#index").text(i+1);
				tr.find("#usercode").text(userList[i].usercode);
				tr.find("#username").text(userList[i].username);
				tr.find("#gender").text(userList[i].gender==1?"男":"女");
				tr.find("#birthday").text(userList[i].birthday);
				tr.find("#phone").text(userList[i].phone);
				tr.find("#address").text(userList[i].address);
				tr.find("#creationdate").text(userList[i].creationdate);
				tr.find("#roleName").text(userList[i].roleName);
				tr.find("#age").text(userList[i].age);
				tr.find("#detail").attr("href","user_detail.html?id="+userList[i].id);
				tr.find("#delete").attr("onclick","delUser("+userList[i].id+")");
				tr.find("#update").attr("href","user_update.html?id="+userList[i].id);

				$("#user_table").append(tr);
			}
		}
		//删除用户
		function delUser(id) {
			if (confirm("确定删除该用户?")){
				$.ajax({
					url:"../user/delUserById/"+id,
					dataType: "json",
					success:function (result) {
						if (result > 0){
							pageNow = 1;
							loadData_userList();
						}else {
							alert("删除失败!")
						}
					},
					error:function (jqxhr) {
						alert("请求错误:"+jqxhr.status);
					}
				});
			}
		}

		//渲染页码
		function renderPage(total){
			//总页码
			totalPage = Math.ceil(total/pageSize);

			$("#total").text(total);//总页码
			$("#pageNow").text(pageNow);//当前页码
			$("#pageTotal").text(totalPage);//总页码

			//控制翻页的显示与隐藏
			if(pageNow == 1){
				$(".pre").hide();
			}else{
				$(".pre").show();
			}

			if(pageNow == totalPage){
				$(".next").hide();
			}else{
				$(".next").show();
			}
		}
	</script>
</body>
</html>